<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Details.css"/>
    <script src="Details_js.js"></script>
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <title>详情页</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="Main.css">
</head>
<body>

<div class="mainbox">
    <div class="boxtop" style="z-index: 3">
        <ul>
            <li class="boxtop1"><img src="images/logo.png" height="24" width="80"/></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realme-gt-neo-2t">真我GT Neo2T</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realmeow">真奇喵</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realmeow">手机</a>
                <div class="sub_menu">
                    <div class="leftmenu">
                        <div  class="leftmenulittle">
                            <dl><div class="littleboxbox"><P>真我GT NEO2</P>
                                <h1 style="font-size:8px">￥2988</h1>
                                <dd><img id="newphone"></dd></div>
                                <div class="littleboxbox"><P style="font-size: 8px">真我GT NEOPRO</P>
                                    <h1 style="font-size: 8px">￥3288</h1>
                                    <dd ><img id="newphone1"></dd></div>
                                <div class="littleboxbox"> <P style="font-size: 8px">真我GT NEOPROMAX</P>
                                    <h1 style="font-size: 8px">￥3888</h1>
                                    <dd ><img id="newphone2"></dd></div>



                            </dl>
                        </div>
                    </div>
                </div>
            </li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realmeow">AIoT</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realme-phones">所有产品</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/realme-phones">品牌</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/support">服务</a></li>
            <li class="boxtop1"><a href="https://www.realmebbs.com">社区</a></li>
            <li class="boxtop1"><a href="https://www.realme.com/cn/app-download">APP</a></li>
            <li class="boxtop1"><img src="images/personal.png" height="30" width="30"/></li>
        </ul>
    </div>
</div>
<div class="flex-tu">
    <div class="flex-item-tu2">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0"
                    class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>

            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/realmeBook.png"  height="600" width="600"alt="First slide">
                </div>
                <div class="item">
                    <img src="images/image1.1.png"  height="600" width="600"alt="First slide">
                </div>
                <div class="item">
                    <img src="images/image1.2.png"  height="600" width="600"alt="First slide">
                </div>
                <div class="item">
                    <img src="images/image1.3.png"  height="600" width="600"alt="First slide">
                </div>

            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

        </div></div>
        <script>
            $(function(){
                // 初始化轮播
                $(".start-slide").click(function(){
                    $("#myCarousel").carousel('cycle');
                });
                // 停止轮播
                $(".pause-slide").click(function(){
                    $("#myCarousel").carousel('pause');
                });
                // 循环轮播到上一个项目
                $(".prev-slide").click(function(){
                    $("#myCarousel").carousel('prev');
                });
                // 循环轮播到下一个项目
                $(".next-slide").click(function(){
                    $("#myCarousel").carousel('next');
                });
                // 循环轮播到某个特定的帧
                $(".slide-one").click(function(){
                    $("#myCarousel").carousel(0);
                });
                $(".slide-two").click(function(){
                    $("#myCarousel").carousel(1);
                });
                $(".slide-three").click(function(){
                    $("#myCarousel").carousel(2);
                });
            });
        </script>

    <div class="flex-item-tu">
        <div class="image-right1">
            <div class="image-right1-1">
                <span>realme Book</span>
                <span>(
                <span>海岛灰 i5 8G+512G</span>
                )</span>
            <div class="image-right1-2">
                <span>¥ </span>
                <span>4299</span>
            </div>

            </div>
        </div>
        <div class="image-right1">

            <div class="imag=e-right1-1">
                <span class="express1">发&nbsp&nbsp&nbsp&nbsp货</span>
                <span class="express2">&nbsp&nbsp支付成功后48小时内发货</span>
            </div>
            <div class="image-right1-2">
                <span class="express1">晒&nbsp&nbsp&nbsp&nbsp单</span>
               <span class="express2">&nbsp&nbsp优质好评返20元红包 </span>
            </div>
        </div>
        <div class="time-flex-container">
            <div class="time-flex-item-image1"><img src="images/time1.png" width="20px" height="20px"></div>
            <div class="time-flex-item">7天无理由退货</div>
            <div class="time-flex-item-image2"><img src="images/sofa.png" width="20px" height="20px"></div>
            <div class="time-flex-item1">安全支付</div>
            <div class="time-flex-item-image2"><img src="images/Alipay.png" width="20px" height="20px"></div>
            <div class="time-flex-item1">花呗分期</div>
        </div>
        <div class="flex-container-color">
            <p>颜色</p>
            <div class="flex-item-color">
                <input type="radio">
                <span>海岛灰</span>
            </div>
        </div>
        <p>版本</p>
        <div class="flex-container-i5">
            <div class="flex-item-i5">
                <span><input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked=""><label for="radio-1-1"></label> i5 16G+512G
                </span>
            </div>
            <div class="flex-item-i5">
                <span><input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" checked=""><label for="radio-1-1"></label>i5 8G+512G
                </span>
            </div>
        </div>
        <p>数量</p>
        <div class="goods">
            <div class="flex-container-goods">
                <div class="flex-item-goods">-</div>
                <div class="flex-item-goods">1</div>
                <div class="flex-item-goods">+</div>
            </div>
        </div>
        <div class="info">
            <div class="info-left">
                <span>花呗分期</span>
                <img src="images/Alipay1.png" alt="">
                <span style="color:red">该商品最高可享12期分期免息</span>
            </div>
            <br>
            <div class="right" style="color: #b0b0b0">什么是花呗分期?</div>
        </div>
        <div class="pay-bd">
            <div class="pay-bd-item">
                <p>¥1433.66×3</p>
                <p style="color: #e30a0a">免手续费</p>
            </div>
            <div class="pay-bd-item">
                <p>¥733.16×6</p>
                <p style="color: #e30a0a">免手续费</p>
            </div>
            <div class="pay-bd-item">
                <p>¥366.58×12</p>
                <p style="color: #e30a0a">免手续费</p>
            </div>
        </div>
        <div class="all">
            <div class="all1">
                <div class="info" >
                    <div class="info-left">
                        <span style="font-size: 24px">海岛灰 i5 8G+512G</span>
                    </div>
                    <div class="right"   style="font-size: 20px">x1</div>
                </div>
                <div class="info" >
                    <div class="info-left">
                        <span style="font-size: 28px">总计：</span>
                    </div>
                    <div class="right" style="color: #e30a0a"><h1>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp¥4399</h1></div>
                </div>

                <div class="flex-container-car" >
                    <div class="flex-item-car" ><button type="button" class="btn btn-default btn-lg ">加入购物车</button></div>
                    <div class="flex-item-car" ><button type="button" class="btn btn-default btn-lg " style="background-color: gold"> 立即购买</button></div>
                </div>
            </div>



            </div>
        </div>


    </div>
</div>
<div class="view">
    <div class="flex-container-view">
        <div class="flex-item-view">概述</div>
        <div  class="flex-item-view" style="color: #b0b0b0">评价</div>
    </div>

</div>

<div  class="realmebookDa" style="background: #b0b0b0">
    <div class="realmebookmid"><div><img src="images/realmebookDa.jpg" height="450px" width="1100px"></div></div>
</div>
<div class="boxservice">
    <div class="boxservicepicture">
        <dl>
            <dd><img src="images/7.png"/></dd>
            <dd><img src="images/30.png"/></dd>
            <dd><img src="images/money.png"/></dd>
            <dd><img src="images/goods.png"/></dd>
        </dl>


    </div>
    <div class="boxservicetext">

        <dl>
            <dd class="boxservicetext">七天无理由退货</dd>
            <dd class="boxservicetext">手机30天换货保障</dd>
            <dd class="boxservicetext">满79包邮</dd>
            <dd class="boxservicetext">正品保障</dd>
        </dl>
    </div>

    <div class="bottom-middle">
        <div class="bottom-menu">
            <h2 class="bottom-menu-title">推荐产品</h2>
            <ul class="bottom-menu-list">
                <li><a href="#">真我GT Neo2T</a></li>
                <li><a href="#">真我Q3s</a></li>
                <li><a href="#">真我GT Neo2 5G</a></li>
                <li><a href="#">真我GT 大师探索版 5G</a></li>
                <li><a href="#">真我GT Neo 闪速版 5G </a></li>
                <li><a href="#">真我 GT 5G</a></li>
                <li><a href="#">真我Q3 Pro 5G</a></li>
            </ul>
        </div>
        <div class="bottom-menu">
            <h2 class="bottom-menu-title">服务支持</h2>
            <ul class="bottom-menu-list">
                <li><a href="#">配送方式</a></li>
                <li><a href="#">服务政策</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">故障排除</a></li>
                <li><a href="#">预装应用公示</a></li>
                <li><a href="#">R码通道</a></li>
            </ul>
        </div>
        <div class="bottom-menu">
            <h2 class="bottom-menu-title">关于我们</h2>
            <ul class="bottom-menu-list">
                <li><a href="#">关于realme</a></li>
                <li><a href="#">ColorOS官网</a></li>
                <li><a href="#">realme社区</a></li>
                <li><a href="#">加入我们</a></li>
            </ul>
        </div>
        <div class="bottom-menu">
            <h2 class="bottom-menu-title">联系我们</h2>
            <ul class="bottom-menu-list">
                <li><a href="#">service.cn@realme.com</a></li>
            </ul>
        </div>
        <div class="bottom-menu">
            <div class="bottom-middle-menu-phone"><a href="#">400-628-0066</a></div>
            <div class="bottom-middle-menu-time">8:00-20:00，周一至周日</div>
            <div class="bottom-middle-menu-client"><a><img src="img/client.png">在线客服</a></div>
            <div class="bottom-middle-menu-time">9:00-22:00，周一至周日</div>
            <div class="bottom-middle-menu-social">
                <div class="bottom-middle-menu-wechat"> <a><img src="img/WeChat.png"></a></div>
                <div class="bottom-middle-menu-weibo"><a><img src="img/weibo.png"></a>
                </div>
            </div>
        </div>
    </div>
    <div class="region">
        <a>Mainland China ( 简体中文 / CNY )</a>
    </div>
    <div class="bottom-end">
        <div class="wrapper" style="display: flex;flex-direction: row;justify-content: space-around">
            <div class="copyright">
                © 2019-2021 realme 版权所有. 渝ICP证20200030号
                渝ICP备19011033号-1
                渝公网安备 50011202501913号</div>
            <div class="legal">
                <a href="">用户协议</a>|
                <a href="">隐私政策</a>|
                <a href="">服务政策</a>|
                <a href="">侵权投诉指南</a>
            </div>
        </div>
    </div>

</div>
</body>
</html>